I need help with my code. My markers are not placed correctly and the information does not appear when i hover over them. Here are the assignment steps. Using your editor, open the ss$\_$dday$\_$txt$.$html and ss$\_$layout$\_$txt$.$css files from the html$03$ case$2$ folder. Enter your name and the date in the comment section of each file, and save them as ss$\_$dday.html and ss$\_$layout.css respectively.

$2$

Go to the ss$\_$dday.html file in your editor. Within the document head, create links to the ss$\_$styles.css and ss$\_$layout.css style sheet files. Study the content and structure of the document. Note that within the aside element is an image for the battle map with the id mapImage. Also note that there are six marker images enclosed within hypertext links with ids ranging from marker$1$ to maker$6.$ After each marker image are div elements of the mapInfo class with IDs ranging from info$1$ to info$6.$ Part of your style sheet will include style rules to display these div elements in response to the mouse pointer hovering over each of the six marker images.

$3$

Save your changes to the file and then go to the ss$\_$layout.css file in your editor.

$4$

Go to the Article Styles section. Within this section, you$$ll lay out the article describing the Normandy Invasion. Create a style rule to float the article element on the left margin and set its width to $384$ pixels.

$5$

Jakob wants the first line from the article to be displayed in small capital letters. Go to the First Line and Drop Cap Styles section and create a style rule for the first paragraph of the article element and the first line of that paragraph, setting the font size to $1\mathrm{.}25$em and the font variant to small$-$caps. $($Hint: Use the first$-$of$-$type pseudo$-$class for the paragraph and the first$-$line pseudo$-$element for the first line of that paragraph.$)$

$6$

Jakob also wants the first letter of the first line in the article$$s opening paragraph to be displayed as a drop cap. Create a style rule for the article$$s first paragraph and first letter that applies the following styles: $($a$)$ sets the size of the first letter to $4$em in a serif font and floats it on the left, $($b$)$ sets the line height to $0\mathrm{.}8$em$,$ and $($c$)$ sets the right and bottom margins to $5$ pixels. $($Hint: Use the first$-$letter pseudo$-$element for the first letter of that paragraph.$)$

$7$

The interactive map is placed within an aside element that Jakob wants displayed alongside the Normandy Invasion article. Go the Aside Styles section and create a style rule that sets the width of the aside element to $768$ pixels and floats it on the left margin.

$8$

Next, you will lay out the interactive map. The interactive map is placed within a div element with the ID battleMap. Go to the Map Styles section and create a style rule for this element that sets its width to $688$ pixels. Center the map by setting its top$/$bottom margins to $20$ pixels and its left$/$right margins to auto. Place the map using relative positioning.

$9$

The actual map image is placed within an img element with the ID mapImage. Create a style rule for this element that displays it as a block with a width of $100\%.$

$10$

Go to the Interactive Map Styles section. Within this section, you$$ll create style rules that position each of the six map markers onto the battle map. The markers are placed within hypertext links. Create a style rule for every a element of the battleMarkers class that places the hypertext link using absolute positioning.

$11$

Create style rules for the six a elements with IDs ranging from marker$1$ to marker$6,$ placing them at the following $($top$,$ left$)$ coordinates:

marker$1(220,340)$

marker$2(194,358)$

marker$3(202,400)$

marker$4(217,452)$

marker$5(229,498)$

marker$6(246,544)$

$12$

The information associated with each map marker has been placed in div elements belonging to the mapInfo class. Go to the Map Information Styles section and create a style rule that hides this class of elements so that this information is not initially visible on the page.

$13$

To display the information associated with each map maker, you need to create a style rule that changes the map information$$s display property in response to the mouse pointer hovering over the corresponding map marker. Since the map information follows the map marker in the HTML file, use the following selector to select the map information corresponding to the hovered map marker: a$.$battleMarkers:hover $+$ div.mapInfo. Write a style rule for this selector that sets its display property to block.

$14$

Save your changes to the style sheet and then load ss$\_$dday.html in your browser. Verify that a drop cap appears for the first letter of the Normandy Invasion article and the first line of the first paragraph is displayed in small caps. Test the interactive map by first verifying that none of the information about the six battle locations appears on the page unless you hover your mouse pointer over the marker on the battle map.