#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    2
    Rep Power
    0

    CSS Drop Down Menu


    Ok I am creating a CSS/Javascript Horizontal drop down menu and everything looks great except when I go down and highlight items on my submenu the styles go away on the Menu Item Selected, how can I have those attributes maintain when I go on it's sub elements?

    Thanks alot

    Seth

    Code:
    <div id="Nav">
                        <ul class="menu">
                            <li>
                                <a href="#">
                                    Home
                                </a>
                            </li>
                            <li>
                                <a href="#" onclick="javascript:showlayer('sm_1')">
                                    Profile
                                </a>
                                <ul class="submenu" id="sm_1">
                                    <li><a href="#">Portfolio</a></li>
                                    <li><a href="#">Resume</a></li>
                                    <li><a href="#">About Me</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">
                                    Contact
                                </a>
                            </li>
                            <li>
                                <a href="#" onclick="javascript:showlayer('sm_2')">
                                    Login
                                </a>
                                <ul class="submenu" id="sm_2">
                                    <li><a href="#">Friends</a></li>
                                    <li><a href="#">Family</a></li>
                                    <li><a href="#">Admin</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>


    Code:
    ul, li
    {
    	margin:0; border:0; padding:0; list-style:none;
    }
    #Nav
    {
    	font-size:11px;
    	color:#3b5d14;
    	font-weight:bold;
    	padding:4px;
    	height:30px;
    	font-family: Lucida Sans;
    }
    #Nav .menu li 
    {
    	/*background:url(Images/Light/Left-Menu.png) left top no-repeat;*/
    	height:30px;
    	float:left;
    	margin-right:10px;
    }
    #Nav .menu li a
    {
    	color:#F1F1F1;
    	width: 75px;
    	text-decoration:none;
    	padding:0 10px;
    	height:30px;
    	line-height:30px;
    	display:block;
    	float:left;
    	padding:0 26px 0 10px;
    	background:url(Images/Light/Right-Menu-Off.png) right top no-repeat;
    	font-family: Lucida Sans;
    }
    
    
    #Nav .menu li a:hover
    {
    	color:#666666;
    	background: url(Images/Light/MenuRight.png) right top no-repeat;
    }
    
    #Nav .menu li:hover
    {
    		
    	background: url(Images/Light/Menu-Hover.png) left top no-repeat;
    }
    
    #Nav ul .submenu 
    {
    	border:solid 1px #7ea3bb;
    	margin-left: auto;
    	margin-right: auto;
    	/*border-top:none;*/
    	background:#FFFFFF;
    	position:relative;
    	top:1px;
    	width:100px;
    	padding:6px 0;
    	clear:both;
    	z-index:2;
    	display:none;
    	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);opacity:.95
    }
    #Nav ul .submenu li
    {
    	background:none;
    	display:block;
    	float:none;
    	margin:0 6px;
    	border:0;
    	height:auto;
    	line-height:normal;
    	/*border-top:solid 1px #DEDEDE;*/
    }
    #Nav .submenu li a
    {
    	background:none;
    	display:block;
    	float:none;
    	padding:6px 6px;
    	margin:0;
    	border:0;
    	height:auto;
    	color:#105cbe;
    	line-height:normal;
    }
    #Nav .submenu li a:hover
    {
    	background:#ebf4fa;
    }
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, JrunkinDuncan.

    Change
    Code:
    #Nav .menu li a:hover
    {
    	color:#666666;
    	background: url(Images/Light/MenuRight.png) right top no-repeat;
    }
    to
    Code:
    #Nav .menu li a:hover,
    #Nav .menu li:hover a
    {
    	color:#666666;
    	background: url(Images/Light/MenuRight.png) right top no-repeat;
    }
    You may need to change
    Code:
    #Nav .submenu li a
    {
    	background:none;
    	display:block;
    	float:none;
    	padding:6px 6px;
    	margin:0;
    	border:0;
    	height:auto;
    	color:#105cbe;
    	line-height:normal;
    }
    #Nav .submenu li a:hover
    {
    	background:#ebf4fa;
    }
    to the following as well
    Code:
    #Nav .menu li .submenu li a
    {
    	background:none;
    	display:block;
    	float:none;
    	padding:6px 6px;
    	margin:0;
    	border:0;
    	height:auto;
    	color:#105cbe;
    	line-height:normal;
    }
    #Nav .menu li .submenu li a:hover
    {
    	background:#ebf4fa;
    }
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    2
    Rep Power
    0
    Ausome works great, Thanks alot. Got a feeling I am gonna like these forums. Also can you reccommend any good web reading on CSS Advanced Techniques, just starting to get into it and wouldn't mind some further instruction.

    Thanks,

    Seth
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You're welcome.

    Without knowing which kinds of techniques you're particularly interested in, I'll just suggest you take a look at the CSS section of my site.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo