Very new to HTML & CSS. In need of some help with a drop down menu

I am very new to html and css. I am trying to add a drop down menu to an existing menu and I can’t seem to figure it out.

CSS

/* Nav Styles
---------------------------------*/
.navbar-inverse {
    background-color: transparent;
    border-color: transparent;
}

.navbar {
    border: 0px solid #fff;
    min-height: 40px;
    margin-bottom: 0px;
}

.navbar-inverse .navbar-nav > li > a {
    color: #FFF;
}

.navStyle {
    float: right;
}

.navStyle ul {
    list-style: none;
    padding: 0px;
}

.navStyle ul li {
    display: inline-block;
    margin: 0 5px;
}

.navStyle ul li:first-child {
	/*margin:0px;*/;
}

.navStyle ul li:last-child {
    margin: 0 0 0 23px;
}

.navStyle ul li a {
    display: block;
    font-size: 14px;
    color: #222222;
    font-family: 'Raleway', sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.navStyle ul li a:hover {
    color: #005490;
}

.navStyle > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    color: #005490;
    background-color: transparent;
}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    color: #005490;
    background-color: transparent;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active  a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
	background-color: #005490;
	border-radius:5%;
}

.navStyle > li.active > a,
.navStyle > li.active > a:hover {
    text-decoration: none;
    color: #005490;
    background-color: transparent;
}

.borderLeft {
    border-left: 1px solid #DADADA;
}

.borderTop {
    margin-top: 30px;
    border-top: 1px solid #DADADA;
}

.mrgTop {
    margin-top: 30px;
}


#main-nav ul li a:hover {
    color:#ccc
    text-decoration: none;
}

#main-nav ul li:hover ul {
    display: block;
}

#main-nav #dropdown ul   {
    
    display:none;
    position:absolute;
    
}

#main-nav #dropdown li {
    
    display: block;
    
}

#main-nav #dropdown li {
    
    display; none;
    position: absolute;
}

Welcome to the forums, @pamcole2013. Thank you for posting your CSS, but it really doesn’t mean much without us being able to see the structure of the HTML that is behind it. Could you please post that also?

2 Likes

As @webmachine says, we need to see your HTML as well. However, in the following CSS you are always going to have display: none; as it is the last rule.

#main-nav #dropdown li {
    display: block;
}

#main-nav #dropdown li {
    display; none;
    position: absolute;
}

I suspect (but I can only guess without seeing your HTML) that this is more like what you need:

#main-nav #dropdown li {
    display; none;
    position: absolute;
}

#main-nav #dropdown li:hover,
#main-nav #dropdown li:focus {
    display: block;
}

Thanks for the help, I tried putting in the html code as well, but as I am new it wouldn’t let me…

HTML

<!--Header_section-->
<header id="header_wrapper">
  <div class="container">
    <div class="header_box">
      <div class="logo"><img src="img/logo_146_40.png" alt="logo"></div>
	  <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
        <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        </div>
		
	    <div id="main-nav" class="collapse navbar-collapse navStyle">
			<ul class="nav navbar-nav" id="mainNav">
			  <li class="active"><a href="#hero_section" class="scroll-link">Home</a></li>
			  <li><a href="#aboutUs" class="scroll-link">About Us</a></li>
			  <li><a href="#Landlord" >Landlord</a>
			      <ul id="dropdown">
                      <li><a href="register.html">Register</a></li>
                      <li><a href="login.html">Login</a></li>      
			      </ul>
                </li>
                
              <li><a href="#Landlord" >Tenant</a>
			      <ul id="dropdown">
                      <li><a href="register.html">Register</a></li>
                      <li><a href="login.html">Login</a></li>      
			      </ul>
                </li>
			  
			  <li><a href="#membership" class="scroll-link">Membership</a></li>
			  <li><a href="#pricing" class="scroll-link">Prices</a></li>
			  <li><a href="#contact" class="scroll-link">Contact</a> </li>
			 <li>
								
			</ul>
      </div>

What do you mean, “It wouldn’t let you?”

EDIT:   n-e-v-e-r   m-i-n-d    

@pamcole2013: when you post code on the forums, you need to format it so it will display correctly.

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

To display html or other code in the forums it has to be formatted.
You can do this by highlighting then using the </> button on the toolbar, or you can place three back-ticks on a line of their own, before and after the block of code.

`Some Code Here.`
<!--Header_section-->
<header id="header_wrapper">
  <div class="container">
    <div class="header_box">
      <div class="logo"><img src="img/logo_146_40.png" alt="logo"></div>
	  <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
        <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        </div>
		
	    <div id="main-nav" class="collapse navbar-collapse navStyle">
			<ul class="nav navbar-nav" id="mainNav">
			  <li class="active"><a href="#hero_section" class="scroll-link">Home</a></li>
			  <li><a href="#aboutUs" class="scroll-link">About Us</a></li>
			  <li><a href="#Landlord" >Landlord</a>
			      <ul id="dropdown">
                      <li><a href="register.html">Register</a></li>
                      <li><a href="login.html">Login</a></li>      
			      </ul>
                </li>
                
              <li><a href="#Landlord" >Tenant</a>
			      <ul id="dropdown">
                      <li><a href="register.html">Register</a></li>
                      <li><a href="login.html">Login</a></li>      
			      </ul>
                </li>
			  
			  <li><a href="#membership" class="scroll-link">Membership</a></li>
			  <li><a href="#pricing" class="scroll-link">Prices</a></li>
			  <li><a href="#contact" class="scroll-link">Contact</a> </li>
			 <li>
								
			</ul>
      </div>
	 </nav>

I posted it the way I was told to… Did it not work?

Did you try my suggestion in post #3?

I did try, thanks… but it didn’t work. I’m obviously doing something wrong.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.