Dropdown Menus and Background Images
I am trying to show a client how her website will look with a certain background as well as multi level dropdown menus. Many of you were very helpful and I thank you.
Here are my challenges:
1. I'm using the code for a backfround image however the image will not show. Is that because I'm using my local computer and nothing has been upgraded to the host?
2. I want to have 2 level of dropdown menus and it's not working. I want "vacations" to move over to the right and be "under" memories with an arrow the same way as "photobooks". Here is my code & a screenshot.
<nav class="navbar navbar-expand-lg"> <a class="navbar-brand" href="IMAGES/Picture This Photo Books Logo website 33%.gif"><img src="IMAGES/Picture This Photo Books Logo website 33%.gif" class="rounded-circle img-fluid" alt="Picture This Photo Books logo"></a><br />
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="home.html" a style="color: #653819">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="aboutus.html" a style="color: #653819">About Us</a> </li>
<li class="nav-item"> <a class="nav-link" href="testimonials.html" a style="color: #653819">Testimonials</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="photobooks.html" a style="color: #653819" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Photo Books </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="memories.html" a style="color: #653819" background-color: transaprent>Memories</a> <a class="dropdown-item" href="vacations.html" a style="color: #800000">Vacations</a>
<a class="dropdown-item" href="christenings.html" a style="color: #653819">Christenings</a> </div>
</li>
<li class="nav-item"> <a class="nav-link" href="contact us" a style="color: #800000">Contact Us</a> </li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" a style="color: #653819" type="submit">Search</button>
</form>
</div>
</nav>
Thank you.
CJ
