Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

willkey
willkey
3,650 Points
Posted by willkey
willkey
3,650 Points

Issues with my personal web project. Conflict between a carousel and a Dropdown menu.

Hi,

I have been learning HTML, CSS for a while and I have been trying to build a website. I created a Dropdown menu in a second html document and this works fine. I placed that section of html and css code into my web project. Now my Dropdown menu behaviour is all weird. First I had to put in a z-index, as part of the menu was hidden behind the carousel section. Thought this had fixed the issue. BUT now when i hover over the menu. sometimes it works and shows a pointer cursor and sometimes, it's not showing the Dropdown menu icons. I am completely confused, as i know the menu worked in a second html document.

I have tried to post the code below.

'''html <div class="wrapper">

        <header class="header-wrapper">
            <section id="container"><!-- Change to Navbar Container -->
                <nav class="header-nav">
                    <ul class="flex-container">
                        <li><a class="branding" href="#">Yacht Charter</a></li>
                        <li><a href="#">Yachts&nbsp;<i class="fas fa-angle-down"></i></a>
                            <!-- First Tier Drop Down -->
                            <ul>
                                <li><a href="#">Bavaria 50</a></li>
                                <li><a href="#">Bavaria 44&nbsp;<i class="fas fa-angle-right"></i></a>
                                    <!-- Second Tier Drop Down -->
                                    <ul>
                                        <li><a href="#">Emerald Star</a></li>
                                        <li><a href="#">Adelaide Star</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Bavaria 38&nbsp;<i class="fas fa-angle-right"></i></a>
                                    <!-- Second Tier Drop Down -->
                                    <ul>
                                        <li><a href="#">Victoria Star</a></li>
                                        <li><a href="#">Elizabeth Star</a></li>
                                        <li><a href="#">Canberra Star</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Bavaria 37&nbsp;<i class="fas fa-angle-right"></i></a>
                                    <!-- Second Tier Drop Down -->
                                    <ul>
                                        <li><a href="#">Mayan Star</a></li>
                                        <li><a href="#">Brisbane Star</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Bavaria 36&nbsp;<i class="fas fa-angle-right"></i></a>
                                    <!-- Second Tier Drop Down -->
                                    <ul>
                                        <li><a href="#">Melbourne Star</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="margin-left active"><a href="#">Home</a></li>
                    </ul>
                </nav>
            </section>

        </header><!-- END .header-wrapper -->

        <section class="carousel">
            <div class="slider-wrapper">
                <div id="arrowLeft" class="arrow"></div>
                    <div id="slider">
                        <!-- Slide 1 -->
                        <div class="slide slide1">
                            <div class="slide-content">
                                <span>Image One</span>
                                <p>Image One Text</p>
                            </div>
                        </div>

                        <!-- Slide 2 -->
                        <div class="slide slide2">
                            <div class="slide-content">
                                <span>Image Two</span>
                                <p>Image Two Text</p>
                            </div>
                        </div>

                        <!-- Slide 3 -->
                        <div class="slide slide3">
                            <div class="slide-content">
                                <span>Image Three</span>
                                <p>Image Three Text</p>
                            </div>
                        </div>
                    </div>
                <div id="arrowRight" class="arrow"></div>
            </div>
        </section><!-- END .carousel -->

        <section class="main-content-container">
            <div class="main-content">
                <p>Main Content</p>
            </div>
        </section><!-- END .main-content -->

        <footer class="footer-wrapper">
            <nav class="footer-nav navbar">
                <ul class="flex-container flex-container-footer">
                    <li><a class="copyright" href="#">Copyright Yacht Charter &copy; 2018</a></li>
                    <li><a class="yachts" href="#">More Info&nbsp;<i class="fas fa-angle-up"></i></a></li>
                    <li><a class="contact-us yachts" id="contactButton" href="#">Contact Us&nbsp;<i class="fas fa-envelope"></i></a></li>
                </ul>
            </nav>
        </footer><!-- END .footer-wrapper -->

        <!-- Modal -->
        <section class="modal-wrapper">
            <div class="modal-overlay"></div>

            <div class="modal" id="modal-contact">
                <div class="modal-container">
                    <span class="close-modal">&times;</span>
                    <form class="form">
                        <div class="modal-header">
                            <h1>Contact Yacht Charter</h1>
                        </div>
                        <div class="modal-content">
                            <div class="form-group">
                                <label for="email">Email Address:</label>
                                <input type="email" class="form-control" id="email" name="email" placeholder="example@example.com">
                            </div>

                            <div class="form-group">
                                <label for="name">Name:</label>
                                <input type="text" class="form-control" id="name" name="name" placeholder="your name here">
                            </div>

                            <div class="form-group">
                                <label for="message">Message:</label>
                                <textarea class="form-control" id="message" name="message" placeholder="your message here"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="form-group">
                                <label for="more-info">Send me more info</label>
                                <input type="checkbox" class="form-control" id="more-info">
                                <button type="button" name="button">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div><!-- /.wrapper -->

'''

'''css

  • { margin: 0; padding: 0; /* outline: 1px solid red; */ }

html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; text-decoration: none; list-style-type: none; }

html, body { font-family: 'Indie Flower', cursive, arial, sans-serif; background-color: #096ab1; height: 100%; margin: 0 auto; }

/* DROPDOWN MENU MODULE */

container {

margin: 0 auto;
z-index: 10;

} .flex-container { margin: 0 50px; display: flex; } .margin-left { margin: 2px 0 2px auto; } nav.header-nav { background-color: #074f83; border-radius: 50px; box-shadow: 0 2px 15px 0 rgba(4, 50, 82, 0.5); } nav.header-nav ul { position: relative; } nav.header-nav ul li { display: inline-block; background-color: #074f83; } nav.header-nav a { display: block; padding: 0 10px; color: #FFF; /* font-size: 20px; / line-height: 60px; } .branding { font-weight: 600; / font-size: 32px; / border-right: 1px dotted #03e7ed; border-radius: 15px; } .branding:focus, .branding:hover { color: #03e7ed; } .active a { background-color: #096ab1; border-radius: 20px; } .active a:hover { background-color: #4caff6; font-weight: bold; } / Hide Dropdowns by Default / nav.header-nav ul ul { display: none; position: absolute; top: 60px; / the height of the main nav / z-index: 100; } / Display Dropdowns on Hover / nav.header-nav ul li:hover > ul { display: inherit; } nav.header-nav ul ul a:hover { color: #03e7ed; } / Fisrt Tier Dropdown / nav.header-nav ul ul li { width: 170px; float: none; display: list-item; position: relative; border-radius: 5px; border-bottom: 1px solid #03e7ed; } nav.header-nav ul ul li:last-child { border-bottom: none; } / Second, Third and more Tiers / nav.header-nav ul ul ul li { position: relative; top: -60px; left: 170px; } / END DROPDOWN MENU MODULE */

/* CAROUSEL SLIDER MODULE */ body,

slider,

.slider-wrapper, .slide-content { margin: 0; padding: 0; width: 100%; height: 25vh; overflow-x: hidden; } .slider-wrapper { position: relative; } .slide { background-size: cover; background-position: center; background-repeat: no-repeat; */

opacity: 0.5;

} .slide1 { background-image: url(../images/1.jpg); } .slide2 { background-image: url(../images/2.jpg); } .slide3 { background-image: url(../images/3.jpg); } .slide-content { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .slide-content > span { font-size: 5rem; } .slide-content > span, .slide-content > p { color: #fff; } .arrow { cursor: pointer; position: absolute; top: 50%; margin-top: -35px; width: 0; height: 0; border-style: solid; }

arrowLeft {

border-width: 15px 20px 15px 0;
border-color: transparent #fff transparent transparent;
left: 0;
margin-left: 30px;

}

arrowRight {

border-width: 15px 0 15px 20px;
border-color: transparent transparent transparent #fff;
right: 0;
margin-right: 30px;

}

arrowLeft:hover {

border-color: transparent #000 transparent transparent;

}

arrowRight:hover {

border-color: transparent transparent transparent #000;

} /* END CAROUSEL SLIDER MODULE */

.main-content { min-height: calc(100vh - 50px); } .main-content, footer { padding: 10px; margin: 10px 15px; background-color: #d3d3d3; border: 1px solid red; } footer { height: 50px; line-height: 50px; background-color: lightgreen; }

'''

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

Use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:
Or watch this video on code formatting.

Of particular note is those three marks that indicate code should be accents, not apostrophes.