Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS add dropdown to a already exist nav bar?

AI_Shiro

Coder
CSS:
:root{
    --navbar-height: 80px;
}
body{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;

}
nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 10px 90px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.6);
    overflow: auto;
}
nav .logo{
    padding: 22px 20px;
    height: var(--navbar-height);
    float: left;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
}
nav ul{
    list-style: none;
    float: right;
    margin: 0;
    padding: 0;
    display: flex;
}
nav ul li a{
    line-height: var(--navbar-height);
    color: #fff;
    padding: 12px 30px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}
nav ul li a:hover{
    background: rgba(0, 0, 0, 0.7);
    border-radius: 6px;

}
section{
    width: 100%;
    height: 100vh;
    background: url(images/bg.png);
    background-size: cover;
    background-color: #CECECE;
    background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
}
.content{
    justify-content: center;
    padding: 100px;
    margin: 0px;
    font-size: 25px;
    color: rgb(20, 247, 255);
}
.col{
    display: flex;
    justify-content: center;
    align-items: center;
    scrollbar-width: none;
    color: aqua;
}
#logo{
    float: left;
    width: 180px;
    height: 100px;
    margin-left: 20px;
}
.tg  {
    border-collapse:collapse;
    border-spacing:0;
}
.tg td{
    border-color:black;
    border-style:solid;
    border-width:0px;
    font-family:Arial, sans-serif;
    font-size:18px;
    overflow:hidden;
    padding:10px 5px;
    word-break:normal;
}
.tg th{
    border-color:black;
    border-style:solid;
    border-width:0px;
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:normal;
    overflow:hidden;
    padding:10px 5px;
    word-break:normal;
}
.tg .tg-0lax{
    text-align:left;
    vertical-align:top
}
.spells{
    text-align: center;
    background-color: #ddd;
}
.desc{
    text-align: center;
    padding: 50px;
    color: aqua;
}
.spell{
    float: left;
    padding: 0px;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>TITLE</title>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <nav>
        <a href="#"><div class="logo"><img id="logo" src="images/title.png"></a></div>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link + dropdown</a></li>
            <li><a href="#" target="_blank">Link</a></li>
            <li><a href="#" target="_blank">Link</a></li>
        </ul>
        <div class="content">
            <div class="col">
                <p><!--<iframe REMOVED>
                    
                    </iframe>-->
                <br></p>
            </div>
        </div>

    </nav>

    <section></section>
</body>
</html>

How can i add a dropdwon to this navbar ?
i am new and i know its not the best and clean code but it works for me atm :)
 
This is the code for a dropdown:
HTML:
<select>
  <option value="option_1">Option 1</option>
  <option value="option_2">Option 2</option>
  <option value="option_3">Option 3</option>
</select>

So in your code it's like this:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>TITLE</title>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <nav>
        <a href="#"><div class="logo"><img id="logo" src="images/title.png"></a></div>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">
<!---->         <select>
<!---->             <option value="option_1">Option 1</option>
<!---->             <option value="option_2">Option 2</option>
<!---->             <option value="option_3">Option 3</option>
<!---->         </select>
            </a></li>
            <li><a href="#" target="_blank">Link</a></li>
            <li><a href="#" target="_blank">Link</a></li>
        </ul>
        <div class="content">
            <div class="col">
                <p><!--<iframe REMOVED>
                   
                    </iframe>-->
                <br></p>
            </div>
        </div>

    </nav>

    <section></section>
</body>
</html>
 
Without JS, remove all the JS and add this to the CSS:
CSS:
.headerLink:hover ~ .tttDropdown {
  display: block;
}

.tttDropdown:hover {
  display: block;
}
 
If you still need help with it tell me, and then I can explain or making a bit simpler.

A lot of the CSS is just styling and is not necessary.
 
Sorry for not replying sooner, I've been busy lately.

Here's the code without styling:
HTML:
<ul class="d1">
  <li>
    <a class="d2">
      Add your text/icon
    </a>
    <div class="d3 hidden">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>
CSS:
.hidden {
  display: none;
}

.d1 {
  list-style-type: none;
}

.d3 {
  position: absolute;
  top: 0px; /*change depending on your position of header*/
  left: 0px; /*change depending on your position of header*/
  z-index: 2;
}

.d3 a {
  display: block;
}

.d2:hover ~ .d3 {
  display: block;
}

.d3:hover {
  display: block;
}
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom