Jump to content

Dropdown menu showing permanently and altering nav bar


Recommended Posts

I am trying to use a dropdown menu with a fixed navigation bar.  The dropdown links are showing all the time and teh navigation bar has grown to include them so it is wider than normal.

below is the CSS code, attached is the file which tries to use it. Why does my navigation bar not do the same as teh one in W3schools?

 

/* Style the navigation bar links */
ul {
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #008080;
  position: fixed;
    top: 0;
    width: 100%;
}

 li {
    float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: lightseagreen;
}

li.dropdown {
    display:inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #008080;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
    color:black;
    padding:12px 16px;
    text-decoration: none;
    display: block;
    text-align:left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}

 

Services.html

Link to post
Share on other sites

what's the w3schools link for comparison?

Link to post
Share on other sites

You are breaking the rules of having child elements within ul element that are not! li elements. The closest correct option you can have, is

        <div class="topnav">
            <ul>
                <li><a href="index.html">Home</a><span class="hide"></span></li>
                <li><a href="About.html">About</a></li>
                <li><a href="Terms.html">Terms</a></li>
                <li><a href="Links.html">Links</a></li>
                <li><a href="Contact.html">Contact</a></li>
                <li><a class="active" href="Services.html">Classes</a></li>
                <li>
                    <div class="dropdown">
                        <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
                        <div class="dropdown-content">
                            <a href= "upton.html">Upton St Leonards</a>
                            <a href="kingsway.html">Kingsway</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

You will have to remove overflow: hidden from topnav, and reset li .dropdown to

li .dropdown {
                position: relative;
                display:inline-block;
            }

You require position: relative to keep the position: absolute content at the correct location, also i would apply position: fixed properties to .topnav, 

Your link tag has a href link to google fonts and also includes a href link to style.css.

no one uses <center>...</center> anymore, and you not allowed to invent new closing tags '</p2>' and each p tag must have relative closing tag of </p>

 

 

Edited by dsonesuk
Link to post
Share on other sites
  • 2 weeks later...
22 hours ago, dsonesuk said:

Sounds like overflow: hidden; was not removed. Anything outside a element boundary with overflow: hidden;  property does what it suggests, hides it!

Yes, now it shows. thank you.

Now can anyone explain why I have a black line above every link I hover over?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...