Design menu using BootStrap and on mouse hover change the background color of menu using CSS in ASP.Net

Last Reply on Jan 11, 2017 06:36 AM By AnandM

Posted on Jan 11, 2017 06:05 AM

http://i32.photobucket.com/albums/d4/anni49/menu_zpszhezetra.png

i want to design this type of menu when i click to menu it wil be apper in pinkcolor like button as shown in image.

You are viewing reply posted by: AnandM on Jan 11, 2017 06:36 AM.
Posted on Jan 11, 2017 06:36 AM Modified on on Jan 11, 2017 07:46 AM

Hi jordan,

Please refer below code

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <style type="text/css">
        #menu ul li a:hover
        {
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="menu">
        <ul class="nav navbar-nav navbar-left">
            <li class="active"><a class="btn btn-block" href="#">Home</a></li>
            <li><a class="btn btn-block" href="#">All Products</a></li>
            <li><a class="btn btn-block" href="#">Best Sellers</a></li>
            <li><a class="btn btn-block" href="#">Newest Added</a></li>
        </ul>
    </div>
    </form>
</body>
</html>

Demo