SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member finesoft's Avatar
    Join Date
    Apr 2014
    Location
    New Delhi
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to make menu ?

    How to make the first menu link look as if it is hovered until hovering another link

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The question is a little vague so can you clarify the type of menu you are using and document exactly what you want to happen. e.g. Is this a dropdown menu, horizontal or vertical menu?

    Do you have some html or css that we can look at or do you have a live link?

    It sounds like you want a current page indicator menu item which is usually achieved by setting a class on the current item so that it stays in the highlighted state for that page.

  3. #3
    SitePoint Member finesoft's Avatar
    Join Date
    Apr 2014
    Location
    New Delhi
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I mean drop down menu

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You really need to provide us with more details in order to help you Check out the forum posting basics thread for more info.

    If I can make a guess that you want the top level item to remain hovered while still negotiating the sub menu then you need this type of code structure.

    Code:
    #nav > li:hover > a, #nav li li a:hover {
    	background:red;
    	color:#fff
    }

    Here is a full example.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    #nav {
    	display:table;
    	width:960px;
    	margin:auto;
    	border:1px solid #000;
    	text-align:center;
    }
    #nav > li {
    	display:inline-block;
    	position:relative;
    }
    #nav li a {
    	display:block;
    	padding:5px 10px;
    	text-decoration:none;
    	background:#f9f9f9;
    }
    #nav li li { text-align:left }
    #nav li li a {
    	display:block;
    	border:1px solid #000;
    	margin:0 0 -1px;
    }
    #nav li ul {
    	position:absolute;
    	left:-999em;
    	width:200px
    }
    #nav li:hover ul { left:0 }
    #nav > li:hover > a, #nav li li a:hover {
    	background:red;
    	color:#fff
    }
    </style>
    </head>
    
    <body>
    <h1>IE8 + only</h1>
    <ul id="nav">
    		<li><a href="#">Menu item</a>
    				<ul>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    				</ul>
    		</li>
    		<li><a href="#">Menu item</a>
    				<ul>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    				</ul>
    		</li>
    		<li><a href="#">Menu item</a>
    				<ul>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    				</ul>
    		</li>
    		<li><a href="#">Menu item</a>
    				<ul>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    				</ul>
    		</li>
    		<li><a href="#">Menu item</a>
    				<ul>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    				</ul>
    		</li>
    		<li><a href="#">Menu item</a>
    				<ul>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    				</ul>
    		</li>
    		<li><a href="#">Menu item</a>
    				<ul>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    						<li><a href="#">Sub Menu item</a></li>
    				</ul>
    		</li>
    </ul>
    </body>
    </html>


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •