RealDevMashup
Reputation: 81
How to do a 2nd tier dropdown with html and css
I am doing this dropdown menu for my team's websites, and I want to have a dropdown ppear next to it when you hover over a link in the 1st dropdown:
<nav id="menu-Items">
<ul>
<li><a href="#">General</a>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<img id="General" src="../../../Images/Main/HomePage/Header/down_arrow.png">
<li><a href="#">Study Tools</a>
<ul>
<li><a href="#">Professors</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">Find a Study Buddy</a></li>
</ul>
</li>
<img id="Study-Tools" src="../../../Images/Main/HomePage/Header/down_arrow.png">
<li><a href="#">Donate</a>
<ul>
<li><a href="#">Patreon</a></li>
<li><a href="#">SubscribeStar</a></li>
<li><a href="#">Paypal</a></li>
<li><a href="#">Stripe</a></li>
<li id="Crypto"><a href="#">Cryptocurrency</a>
<ul id="method">
<li><a href="#">Bitcoin</a></li>
<li><a href="#">Ethereum</a></li>
<li><a href="#">Ripple</a></li>
<li><a href="#">Ethereum</a></li>
<li><a href="#">Bitcoin Cash</a></li>
<li><a href="#">Ethereum</a></li>
<li><a href="#">EOS</a></li>
<li><a href="#">Ethereum</a></li>
<li><a href="#">Cardano</a></li>
<li><a href="#">LiteCoin</a></li>
<li><a href="#">Ethereum</a></li>
<li><a href="#">Stellar</a></li>
<li><a href="#">Ethereum</a></li>
<li><a href="#">IOTA</a></li>
<li><a href="#">NEO</a></li>
</ul>
</li>
<img id="Cryptocurrency" src="../../../Images/Main/HomePage/Header/Left-arrow.png">
</ul>
</li>
<img id="Donate" src="../../../Images/Main/HomePage/Header/down_arrow.png">
<li><a href="#">Spread The Love</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
<img id="StL" src="../../../Images/Main/HomePage/Header/down_arrow.png">
<li><a href="#">Give to Charity</a></li>
</ul>
</nav>
</div>and Ive tried some css that I saw in a youtube video:
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 150px;
}
nav ul li ul li ul {
display: none;
position: absolute;
right: 170px;
top: 0px;
}
nav ul li ul li:hover ul {
display: block;
}And the second dropdoewn would appear, but when I hover over "Donate" instead of "Cryptocurrency". If anyone could help me, that would be much appreciated
Upvotes: 1
Views: 60
Answers (1)
MarLMazo
Reputation: 424
First, you actually need to add proper classes on every ul or li to group them together. So you need to remove the position: absolute cause it changes the position of your certain navigation.
nav ul li ul li ul {
display: none;
position: absolute; /* remove this line*/
right: 170px;
top: 0px;
}
Second, you need to tell specifically what element you will need to use display: block when hover. Since you use an ID: "Crypto" in your Cryptocurrency:
#Crypto:hover ul {
display: block;
}
and remove the
nav ul li:hover ul {
display: block;
}
nav ul li ul li:hover ul {
display: block;
}
As this CSS selector will display the hidden block with similar CSS selector
#Crypto:hover ul {
display: block;
}
nav ul li ul li {
width: 150px;
}
nav ul li ul li ul {
display: none;
/*position: absolute;*/
right: 170px;
top: 0px;
}<nav id="menu-Items">
<ul>
<li><a href="#">General</a>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<img id="General" src="../../../Images/Main/HomePage/Header/down_arrow.png">
<li><a href="#">Study Tools</a>
<ul>
<li><a href="#">Professors</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">Find a Study Buddy</a></li>
</ul>
</li>
<img id="Study-Tools" src="../../../Images/Main/HomePage/Header/down_arrow.png">
<li><a href="#">Donate</a>
<ul>
<li><a href="#">Patreon</a></li>
<li><a href="#">SubscribeStar</a></li>
<li><a href="#">Paypal</a></li>
<li><a href="#">Stripe</a></li>
<li id="Crypto"><a href="#">Cryptocurrency</a>
<ul id="method">
<li><a href="#">Bitcoin</a></li>
<li><a href="#">Ethereum</a></li>
<li><a href="#">Ripple</a></li>
<li><a href="#">Ethereum</a></li>
<li><a href="#">Bitcoin Cash</a></li>
<li><a href="#">Ethereum</a></li>
<li><a href="#">EOS</a></li>
<li><a href="#">Ethereum</a></li>
<li><a href="#">Cardano</a></li>
<li><a href="#">LiteCoin</a></li>
<li><a href="#">Ethereum</a></li>
<li><a href="#">Stellar</a></li>
<li><a href="#">Ethereum</a></li>
<li><a href="#">IOTA</a></li>
<li><a href="#">NEO</a></li>
</ul>
</li>
<img id="Cryptocurrency" src="../../../Images/Main/HomePage/Header/Left-arrow.png">
</ul>
</li>
<img id="Donate" src="../../../Images/Main/HomePage/Header/down_arrow.png">
<li><a href="#">Spread The Love</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
<img id="StL" src="../../../Images/Main/HomePage/Header/down_arrow.png">
<li><a href="#">Give to Charity</a></li>
</ul>
</nav>
</div>Upvotes: 1
Related Questions
- Implement a specific dropdown-menu design
- Creating a dropdown menu using CSS and HTML
- Styling dropdown using CSS
- HTML + CSS drop down menu
- html css dropdown menu
- Dropdown menu HTML + CSS
- Create second level dropdown using css
- Custom dropdown select with css and html
- Simple CSS Dropdown
- Drop Down Navigation - Two Tier Menu (CSS/HTML)